<template>
  <div class="container">
    <!-- 顶部信息区域 -->
    <div class="top-info">
      <div class="user-info">
        <div class="avatar"></div>
        <span class="welcome" style="font-size: 30px; font-weight: 600">HI! Eric 病友</span>
      </div>
    </div>
    <!-- 卡片区域 -->
    <div class="card-container">
      <div class="module report-module" @click="router.push('/Patientreport')">
        <el-icon style="margin-top: 130px" class="module-icon"><Document /></el-icon>
        <h3 style="margin-top: 10px">报告查询</h3>
      </div>
      <div class="intake-output">
        <div class="data-card">
          <h3>近24小时总入量ml</h3>
          <div class="value-box">
            <span class="value">1200</span>
            <el-button 
              type="primary" 
              circle 
              class="action-btn"
              @click="increaseIntake"
            >
              <el-icon><Plus /></el-icon>
            </el-button>
          </div>
        </div>
        <div class="data-card">
          <h3>近24小时总出量ml</h3>
          <div class="value-box">
            <span class="value">800</span>
            <el-button 
              type="primary" 
              circle 
              class="action-btn"
              @click="increaseOutput"
            >
              <el-icon><Plus /></el-icon>
            </el-button>
          </div>
        </div>
      </div>
      <div class="module payment-module" @click="router.push('/PayInfo')">
        <el-icon style="margin-top: 130px" class="module-icon"><Money /></el-icon>
        <h3 style="margin-top: 10px">在线缴费</h3>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue';
import { useRouter } from 'vue-router'
import { Document, Plus, Money } from '@element-plus/icons-vue'

const router = useRouter();
const intake = ref(1200);
const output = ref(800);

const increaseIntake = () => {
  intake.value += 100;
  router.push('/InRecord')
};

const increaseOutput = () => {
  output.value += 100;
  router.push('/OutRecord')
};
</script>

<style scoped>
/* 容器布局 */
.container {
  display: flex;
  flex-direction: column; /* 改为垂直布局 */
  min-height: 100vh;
  background-color:#fff; 
}

/* 顶部信息区域样式 */
.top-info {
  display: flex;
  align-items: center;
  padding: 20px;
  background-color:#fff; /* 可根据需要调整背景色 */
}

.user-info {
  display: flex;
  align-items: center;
}

.avatar {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  margin-right: 12px;
  background: url('public/static/imgs/OIP-C.png') center/cover;
  border: 2px solid #fff;
  box-shadow: 0 4px 8px rgba(106, 27, 154, 0.1); 
}

.welcome {
  font-size: 16px;
  color: #333;
  font-weight: 600;
  letter-spacing: 0.3px; 
}

/* 卡片容器样式 */
.card-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  padding: 20px;
  background-color:lightblue; /* 添加浅绿色背景色 */
}

/* 功能模块样式（报告查询、在线缴费） */
.module {
  width: 300px; /* 增加宽度 */
  height: 400px; /* 增加高度 */
  padding: 20px;
  border-radius: 10px; 
  color: white;
  text-align: center;
  cursor: pointer;
  transition: all 0.2s ease;
  margin: 20px; /* 增加间距 */
}

.module:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(0,0,0,0.1); 
}

.report-module {
  background: #673ab7; 
}

.payment-module {
  background: #4caf50; 
}

.module-icon {
  font-size: 60px; /* 适当增大图标尺寸 */
  margin-bottom: 10px; 
}

/* 数据卡片样式 */
.intake-output {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px; 
  max-width: 600px; 
  margin: 10px; /* 增加间距 */
}

.data-card {
  margin-top: 130px;
  width: 220px; /* 增加宽度 */
  height: 150px; /* 增加高度 */
  background: white;
  padding: 20px;
  border-radius: 10px; 
  box-shadow: 0 4px 8px rgba(125, 147, 178, 0.1); 
}

.value-box {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 15px; 
}

.value {
  font-size: 32px;
  color: #1a2b50;
  font-weight: 600;
}

/* 按钮样式 */
.action-btn {
  width: 40px;
  height: 40px;
  --el-button-hover-bg-color: #66b1ff;
  box-shadow: 0 4px 8px rgba(64, 158, 255, 0.15); 
}

.action-btn .el-icon {
  font-size: 20px;
}

/* 移动端适配 */
@media (max-width: 768px) {
 .intake-output {
    grid-template-columns: 1fr;
  }
}
</style>